<template>
    <van-loading type="spinner" v-if="isLoading"/>
    <div class="container" v-else>
        <van-form @submit="onSubmit">
            <div v-for="(rate,idx) in rates" :key="idx">
                <div class="rate-item">
                    <div class="item-pic">
                        <img :src="order.items[idx].thumb" class="pic" alt="">
                    </div>
                    <div class="flex-fill">
                        <div class="item-title">{{order.items[idx].title}}</div>
                        <div class="item-sku">{{order.items[idx].sku_title}}</div>
                    </div>
                </div>
                <van-field label="商品评分">
                    <template #input>
                        <van-rate v-model="rate.item_star"/>
                    </template>
                </van-field>
                <van-field label="服务评分">
                    <template #input>
                        <van-rate v-model="rate.service_star"/>
                    </template>
                </van-field>
                <van-field label="物流评分">
                    <template #input>
                        <van-rate v-model="rate.wuliu_star"/>
                    </template>
                </van-field>
                <van-field label="评价商品" type="textarea" v-model="rate.message" placeholder="对此次购物的评价"/>
                <van-field label="上传图片">
                    <template #input>
                        <div class="flex-fill">
                            <van-uploader
                                    v-model="rate.images"
                                    :name="idx"
                                    :max-count="3"
                                    :max-size="3 * 1024 * 1024"
                                    :after-read="afterRead"
                                    :before-read="beforeRead"
                                    :multiple="true"
                            />
                            <p class="tips">晒图片,最多3张</p>
                        </div>
                    </template>
                </van-field>
            </div>
            <div style="padding: 20px; background-color: #fff;">
                <van-button round type="info" class="w-100">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
    import {compressImage} from "../lib/compressimg";

    export default {
        name: "OrderRate",
        components: {},
        data() {
            return {
                order: {},
                rates: [],
                isLoading: true,
            }
        },
        mounted() {
            this.fetchData();
        },
        methods: {
            fetchData() {
                const order_id = _data.order_id;
                this.$get('/webapi/bought/get', {order_id}).then(response => {
                    this.order = response.data.order;
                    this.isLoading = false;
                    this.rates = this.order.items.map(d => ({
                        item_star: 0,
                        service_star: 0,
                        wuliu_star: 0,
                        message: '',
                        trade_id: d.trade_id,
                        itemid: d.itemid,
                        images: []
                    }));
                });
            },
            async onSubmit() {
                console.log(this.rates);

                for (var k in this.rates) {
                    var rate = this.rates[k];
                    var images = [];
                    for (var i = 0; i < rate.images.length; i++) {
                        var imgFile = rate.images[i];
                        if (imgFile.content) {
                            var formData = new FormData();
                            formData.append('file', imgFile.file, imgFile.file.name);
                            var response = await this.$axios.post('/webapi/material/uploadimg', formData, {
                                headers: {'Content-Type': 'multipart/form-data'}
                            });
                            const {thumb, image} = response.data.image;
                            images.push({
                                thumb,
                                image,
                                url: image
                            });
                        } else {
                            images.push(imgFile);
                        }
                    }
                    this.rates[k].images = images;
                }

                const rates = this.rates;
                this.$post('/webapi/bought/rate', {rates}).then(response => {
                    this.$toast.success('评价成功');
                    window.history.back();
                });
            },
            afterRead(imgFile, detail) {
                //console.log(detail);
                compressImage(imgFile.content, imgFile.file.name).then(res => {
                    //console.log(res);
                    const {name, index} = detail;
                    this.rates[name].images[index].content = res.base64;
                    this.rates[name].images[index].file = res.file;
                });
            },
            beforeRead(file) {
                //console.log(file);
                return true;
            }
        }
    }
</script>

<style scoped>

</style>
